---
import { siteConfig } from "../config";

const hasProjects = siteConfig.projects && siteConfig.projects.length > 0;
const hasExperience = siteConfig.experience && siteConfig.experience.length > 0;
const hasEducation = siteConfig.education && siteConfig.education.length > 0;
---

<header
  id="header"
  class="fixed top-0 left-0 right-0 z-50 hidden md:block transition-all duration-300"
>
  <nav class="max-w-7xl mx-auto px-8 py-4">
    <ul class="flex items-center gap-8 justify-center">
      <li>
        <a
          href="#about"
          class="text-gray-700 hover:text-black transition-colors font-medium"
        >
          About
        </a>
      </li>
      {
        hasProjects && (
          <li>
            <a
              href="#projects"
              class="text-gray-700 hover:text-black transition-colors font-medium"
            >
              Projects
            </a>
          </li>
        )
      }
      {
        hasExperience && (
          <li>
            <a
              href="#experience"
              class="text-gray-700 hover:text-black transition-colors font-medium"
            >
              Experience
            </a>
          </li>
        )
      }
      {
        hasEducation && (
          <li>
            <a
              href="#education"
              class="text-gray-700 hover:text-black transition-colors font-medium"
            >
              Education
            </a>
          </li>
        )
      }
    </ul>
  </nav>
</header>

<script>
  window.addEventListener("scroll", () => {
    const header = document.getElementById("header");
    if (window.scrollY > 100) {
      header?.classList.add("bg-white/80", "backdrop-blur-sm");
    } else {
      header?.classList.remove("bg-white/80", "backdrop-blur-sm");
    }
  });
</script>

<style>
  html {
    scroll-behavior: smooth;
  }
</style>
